<template>
	<div class="upload-box">
		<div class="content">
			<div class="upload-list">
				<div class="upload" v-for="item in uploadConfig" :key="item.id">
					<h3 class="title">{{ item.name }}</h3>
					<p class="tips">{{ item.tips }}</p>
					<div class="image-list">
						<image-upload 
							:value.sync="item.fileList"
							:maximum="item.limit"
							:id="item.id"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

const uploadConfig = [
	{ id: 'cover', name: '封面图', limit: 1, tips: '将作为列表的封面', fileList: [] },
	{ id: 'layout', name: '户型图(选填)', limit: 5, tips: '最多上传5张', fileList: [] },
	{ id: 'indoor', name: '室内图(选填)', limit: 10, tips: '最多上传10张', fileList: [] },
	{ id: 'identity', name: '身份证(选填)', limit: 3, tips: '最多上传3张', fileList: [] },
	{ id: 'property', name: '房产证(选填)', limit: 3, tips: '最多上传3张', fileList: [] },
	{ id: 'other', name: '其它证件(选填)', limit: 3, tips: '最多上传3张', fileList: [] }
]
import ImageUpload from '@/components/ImageUpload'
export default {
	data() {
		return {
			uploadConfig
		}
	},
	components: {
		ImageUpload
	},
}
</script>

<style lang="less" scoped>
.upload-box {
	position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
	background: #fff;
	.content {
		padding: 0 15px;
		.upload-list {
			padding-top: 16px;
			.upload {
				.title {
					height: 22px;
					line-height: 22px;
					color: #13284D;
					font-size: 16px;
					padding-bottom: 2px;
				}
				.tips {
					height: 16px;
					line-height: 16px;
					color: #9CA5B5;
					font-size: 12px;
				}
				.image-list {
					padding: 12px 0;
				}
			}
		}
	}
}

</style>